<template name="quickForm_semanticUI">
  <div class="ui form">
    {{#autoForm this.qfAutoFormContext}}
      {{> afQuickFields}}
      {{#if qfShouldRenderButton}}
      <div class="field">
        <button type="submit" {{submitButtonAtts}}>
        {{#with ../atts.buttonContent}}
        {{this}}
        {{else}}
        Submit
        {{/with}}
        </button>
      </div>
      {{/if}}
    {{/autoForm}}
  </div>
</template>

<template name="afFormGroup_semanticUI">
  <div class="field{{#if afFieldIsInvalid name=this.atts.name}} error{{/if}}">
    {{#unless skipLabel}}
    <label {{bsFieldLabelAtts}}>{{#if this.labelText}}{{this.labelText}}{{else}}{{afFieldLabelText name=this.atts.name}}{{/if}}</label>
    {{/unless}}
    {{> afFieldInput this.afFieldInputAtts}}
    <div class="error message">{{{afFieldMessage name=this.atts.name}}}</div>
  </div>
</template>

<template name="afObjectField_semanticUI">
  {{#with afFieldLabelText name=this.atts.name}}
  <h4 class="ui block header top attached">{{this}}</h4>
  {{/with}}
  <div class="ui secondary attached segment form error">
    {{#if afFieldIsInvalid name=this.atts.name}}
    <div class="error message">{{{afFieldMessage name=this.atts.name}}}</div>
    {{/if}}
    {{> afQuickFields name=this.atts.name}}
  </div>
</template>

<template name="afArrayField_semanticUI">
  <h4 class="ui block header top attached">
    {{afFieldLabelText name=this.atts.name}}
  </h4>
  <div class="ui secondary segment bottom attached">
    {{#if afFieldIsInvalid name=this.atts.name}}
    <div class="ui form error">
      <div class="error message">{{{afFieldMessage name=this.atts.name}}}</div>
    </div>
    {{/if}}
    {{#afEachArrayItem name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
    <div class="field autoform-array-item">
      <div class="ui input">
        {{#if afArrayFieldHasMoreThanMinimum name=../atts.name minCount=../atts.minCount maxCount=../atts.maxCount}}
        <div class="ui label small red right corner autoform-remove-item">
          <i class="icon minus"></i>
        </div>
        {{/if}}
        {{> afQuickField name=this.name label=false options="auto"}}
      </div>
    </div>
    {{/afEachArrayItem}}
    {{#if afArrayFieldHasLessThanMaximum name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
    <div class="field">
      <div class="ui button small autoform-add-item" data-autoform-field="{{this.atts.name}}" data-autoform-minCount="{{this.atts.minCount}}" data-autoform-maxCount="{{this.atts.maxCount}}">Add item</div>
    </div>
    {{/if}}
  </div>
</template>

<template name="afCheckbox_semanticUI">
  <div class="ui checkbox">
    <input type="checkbox" value="{{this.value}}" {{atts}} />
    <label>{{afFieldLabelText name=this.name}}</label>
  </div>
</template>

<template name="afCheckboxGroup_semanticUI">
  <div class="grouped fields" {{dsk}}>
  {{#each this.items}}
    <div class="field">
      <div class="ui checkbox">
        <input type="checkbox" value="{{this.value}}" {{atts}} />
        <label>{{label}}</label>
      </div>
    </div>
  {{/each}}
  </div>
</template>

<template name="afRadio_semanticUI">
  <div class="ui radio checkbox">
    <label>
      <input type="radio" value="{{this.value}}" {{atts}} />
      {{afFieldLabelText name=this.name}}
    </label>
  </div>
</template>

<template name="afRadioGroup_semanticUI">
  <div class="grouped fields" {{dsk}}>
    {{#each this.items}}
      <div class="field">
        <div class="ui radio checkbox">
          <input type="radio" value="{{this.value}}" {{atts}} />
          <label>{{this.label}}</label>
        </div>
      </div>
    {{/each}}
  </div>
</template>

<template name="afSelect_semanticUI">
  <div class="{{atts.class}}">
    <i class="dropdown icon"></i>
    {{#if this.value}}
      <div class="default text">{{selected}}</div>
    {{else}}
      <div class="default text">{{this.atts.firstOption}}</div>
    {{/if}}
    <div class="menu" data-schema-key="{{this.name}}">
      {{#each this.items}}
        <div class="item{{#if this.selected}} selected active{{/if}}" data-value="{{this.value}}">{{this.label}}</div>
      {{/each}}
    </div>
  </div>
</template>

<template name="afTextarea_semanticUI">
  <textarea {{atts}}>{{this.value}}</textarea>
</template>

<template name="afInputText_semanticUI">
  <input type="text" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputPassword_semanticUI">
  <input type="password" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputButton_semanticUI">
  <input type="button" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputSubmit_semanticUI">
  <input type="submit" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputReset_semanticUI">
  <input type="reset" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputDateTime_semanticUI">
  <input type="datetime" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputDateTimeLocal_semanticUI">
  <input type="datetime-local" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputDate_semanticUI">
  <input type="date" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputMonth_semanticUI">
  <input type="month" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputTime_semanticUI">
  <input type="time" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputWeek_semanticUI">
  <input type="week" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputNumber_semanticUI">
  <input type="number" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputRange_semanticUI">
  <input type="range" value="{{this.value}}" {{this.atts}}/>
</template>

<template name="afInputEmail_semanticUI">
  <input type="email" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputUrl_semanticUI">
  <input type="url" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputSearch_semanticUI">
  <input type="search" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputTel_semanticUI">
  <input type="tel" value="{{this.value}}" {{atts}}/>
</template>

<template name="afInputColor_semanticUI">
  <input type="color" value="{{this.value}}" {{atts}}/>
</template>
